<!--
 * @Descripttion: 商品选择简单版
 * @version:
 * @Author: cxguo
 * @Date: 2019-10-18 09:21:43
 * @LastEditors: cxguo
 * @LastEditTime: 2020-09-09 09:30:31
 -->
<template>
  <div>
    <vxe-grid
      ref="table"
      class="grid"
      border
      resizable
      highlight-hover-row
      :optimization="{rHeights:{small:10}}"
      show-footer
      :row-class-name="(({row}) => { return row.isCancle === '1' ? 'is-cancle' : ''})"
      :footer-method="footerMethod"
      :footer-row-class-name="footerRowClassName"
      :loading="loading"
      :edit-rules="validRules"
      :columns="columnsData"
      :data="tableData"
    />
  </div>
</template>
<script>
import { sunTableAmount } from '@/libs/util.js'
import Api from './export-api.js'
export default {
  name: 'ShowGoodsList',
  mixins: [Api],
  props: {
    columns: {
      type: Array,
      default: () => { return null }
    }
  },
  data() {
    return {
      tableData: [],
      loading: false,
      tableComp: null,
      originColumnsData: [
        { type: 'seq', title: '序号', align: 'center', width: 60 },
        { field: 'name',
          title: '商品名称/规格',
          positionDisable: true,
          showOverflow: true,
          width: 280
        },
        { field: 'code',
          title: '商品编号', width: 150,
          positionDisable: true
        },
        { field: 'quantity', title: '数量', width: 120,
          editRender: { name: 'CxInputNumber', props: { size: 'mini' },
            events: { onBlur: this.onBlur }
          },
          positionDisable: true
        },
        { field: 'unitName', title: '单位', width: 80,
          positionDisable: true
        },
        { field: 'price', title: '单价', align: 'right', width: 100 },
        { field: 'total', title: '金额', align: 'right', width: 100 },
        { field: 'remark', title: '备注', width: 200 }
      ],
      validRules: {
        quantity: [{ required: true, message: '数量必填',
          validator: ({ cellValue, row }) => {
            return new Promise((resolve, reject) => {
              const maxQ = row.maxq
              if (!maxQ) return resolve()
              if (Number(cellValue) > Number(maxQ)) {
                return reject(new Error(`数量不能大于${maxQ}`))
              }
              resolve()
            })
          }
        }]
      }
    }
  },
  computed: {
    columnsData: function() {
      const columnProps = this.columns
      const result = columnProps || this.originColumnsData
      return result
    },
    totalMsg: function() {
      const tableData = this.getTableData().tableData
      const data = {
        num: sunTableAmount(tableData, 'quantity'),
        price: sunTableAmount(tableData, 'total')
      }
      return data
    }
  },
  mounted() {
    this.tableComp = this.$refs.table
  },
  methods: {
    getColByField(field) {
      const data = this.columnProps
      const arr = data.filter(item => { return item.field === field })
      return arr[0]
    },
    setTableData(dataArr) {
      this.tableData = dataArr
    },
    getTableData() {
      if (!this.tableComp) return []
      return this.tableComp.getTableData()
    },
    getPostData() {
      return this.tableData
    },
    footerRowClassName() {
      return 'bg-gay'
    },
    footerMethod({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '合计'
          }
          if (['quantity', 'total'].includes(column.property)) {
            return sunTableAmount(data, column.property)
          }
          return null
        })
      ]
    },
    getGoodsTotal(goodObj) {
      if (!goodObj.price || !goodObj.quantity) return '0.00'
      const quantity = goodObj.quantity || 0
      const price = goodObj.price
      const total = this.$amount(price).multiply(quantity).format()
      return total
    },
    // on
    onPriceChange(value, row) {
      const totalPrice = this.getGoodsTotal(row)
      this.$set(row, 'total', totalPrice)
      this.$refs.table.updateFooter()
    },
    onBlur(e, $table) {
      const { row } = $table
      const value = e.target.value
      const maxQ = row.maxq || 0
      if (maxQ && Number(value) > Number(maxQ)) {
        this.$message.error(`数量不能大于${maxQ}！`)
        this.$set(row, 'quantity', maxQ)
        return
      }
      if (Number(value) < 0) {
        this.$message.error(`数量不能小于0！`)
        this.$set(row, 'quantity', 0)
        return
      }
      const totalPrice = this.getGoodsTotal(row)
      this.$set(row, 'total', totalPrice)
      this.$refs.table.updateFooter()
    }
  }
}
</script>
<style lang="scss" scoped>
.grid{
  /deep/.el-icon-s-operation{
    font-size: 22px;
  }
  /deep/a.el-icon-s-operation:hover{
    font-size: 22px; color: #3198ff;
  }
  .table-oper {
    .el-button--mini{
      padding: 1px;
    }
  }
  /deep/.vxe-table{
    overflow: visible;
  }
  /deep/.vxe-table--body-wrapper.body--wrapper{
    overflow-x: visible;
    overflow-y: visible;
  }
  /deep/.el-input__inner{
    border: #ffffff solid 1px;
  }
  /deep/.el-input-number{
    .el-input__inner{
      border-color: #dcdfe6;
    }
  }
  /deep/.el-input__inner:focus{
    border: #409EFF solid 1px;
  }
  .btn-group{
    .el-button+.el-button{ margin-left: 5px; }
  }
}
</style>
